<template>
	<div class="login">
		<!-- <el-image class="loginBg" :src="img.loginBg" fit="cover"></el-image> -->
		<view class="formK">
			<div class="form">
				<div class="title">
					<!-- <img :src="img.logo" alt=""> -->
					<span>{{$store.state.projectName}}</span>
					<text> - 管理平台</text>
				</div>
				<el-form :rules="rules" :model="form" class="ruleForm" ref="ruleForm">

					<el-form-item label="登录账号:" prop="admin_account" style="width: 600px;">
						<el-input v-model="form.admin_account" placeholder="请输入登录账号" size="large" style="width: 400px;"></el-input>
					</el-form-item>
					<el-form-item label="登录密码:" prop="admin_password">
						<el-input v-model="form.admin_password" placeholder="请输入登录密码" size="large" show-password style="width: 400px;"></el-input>
					</el-form-item>
				</el-form>
				<el-button type="primary" class="sumbit" size="large" @click="sumbit()">登录</el-button>
			</div>
		</view>
	</div>
</template>

<script>
	import img from '@/assets/img/import.js'
	export default {
		data() {
			return {
				img,
				form: {
					admin_account: '',
					admin_password: ''
				},
				rules: {
					admin_account: [{
						required: true,
						message: '请输入登录账号',
						trigger: 'change'
					}],
					admin_password: [{
						required: true,
						message: '请输入登录密码',
						trigger: 'change'
					}],
				}
			}
		},
		methods: {
			sumbit() {
				this.$refs.ruleForm.validate((valid) => {
					if (valid) {
						this.$request.common.login(this.form).then(res => {
							if (res&&res.data.code == 200) {
								this.$store.commit('setToken', res.data.content.token);
								this.$request.common.getAdminUserInfoByToken().then(e=>{
									if(res&&res.data.code == 200){
										this.$message.success('登录成功');
										this.$store.commit('setUserInfo',e.data.content.data);
										this.$store.commit('$navTo', '/administrators')
									}
								})
								
							} else {
								// this.$message.error(res.data.message);
							}
						})
					} else {
						return false;
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.login {
		width: 100%;
		min-width: 600px;
		height: calc(100vh - 40px);
		min-height: 400px;
		border-radius: 10px;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		padding: 0 40px;
		position: relative;

		.loginBg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			-webkit-filter: blur(6px);
			/* Chrome, Safari, Opera */
			filter: blur(4px);
		}

		.formK {
			flex: 1;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 999;

			.form {
				width: 800px;
				height: 50%;
				min-height: 300px;
				box-shadow: 0 0 20px 0 rgba(156, 156, 156, .2);
				background: rgba(255,255,255,.8);
				border-radius: 20px;
				padding: 40px 30px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				z-index: 4;
				.el-input{
					opacity: .8;
					width: 240px;
				}
				.title {
					display: flex;
					flex-direction: row;
					align-items: flex-end;
					img {
						width: 60px;
						height: 60px;
						margin-right: 20px;
						border-radius: 10px;
					}

					span {
						font-size: 40px;
						font-weight: bold;
						color: var(--el-color-primary);
					}
					text{
						padding: 4px 0;
						font-size: 20px;
						font-weight: bold;
						margin-left: 8px;
						color: var(--el-color-primary);
					}
				}

				.sumbit {
					width: 100%;
					margin-top: 30px;
				}
			}
		}
	}
</style>